<template>
	<ma-body>
		<div slot="content" style="padding-bottom: 44px;height: 100%;">
			<div class="swiper-box">
				<u-swiper :list="swiperList" bgColor="#000000" height="308" border-radius="48" id="swiper" name="img"
					@click="onSwiper"></u-swiper>
			</div>

			<div class="title-box" style="position: sticky;z-index: 99;background: #000;" :style="{top: stickyHeight}">
				<span class="title" :class="{'active':index == selectIndex}" v-for="item,index in titleList"
					@tap="onSelect(index)">
					<image v-if="index == selectIndex" :src="item.select" mode="aspectFill"
						style="width: 6.4vw;height: 6.4vw;margin-right: 1.07vw;"></image>
					<image v-else :src="item.no" mode="aspectFill"
						style="width: 6.4vw;height: 6.4vw;margin-right: 1.07vw;"></image>
					{{ item.name }}
				</span> 
			</div>

			<!--   -->
			<swiper :current="selectIndex" @change="onChange" :style="{height: swiperHeight+ 'px'}">
				<swiper-item>
					<div id="num"> 
						<div style="padding: 0 4.27vw;position: relative;" v-if="page0.list.length != 0">
							<product-card v-for="item in page0.list" :item="item"></product-card>
						</div>
						<div class="img-box" v-else>
							<image src="@/static/img/noProduct.png" mode="aspectFill"
								style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
						</div>
						<div
							style="display: flex;flex-direction: column;justify-content: center;margin-top: 3.2vw;">
							<span class="jiu-font24-555" style="text-align: center;">Copyright &copy 48; 2022</span>
							<span class="jiu-font24-555" style="text-align: center;">九歌（广州）文化科技有限公司 </span>
							<span class="jiu-font24-555" style="text-align: center;" @tap="toBei">粤ICP备2022094854号</span>
							<!-- <span class="jiu-font24-555" style="text-align: center;">联系方式 17688486610</span> -->
						</div>
					</div> 

				</swiper-item>
				<!-- <swiper-item>
						<div id="synthetic">
							<div style="padding: 0 4.27vw;"  v-if="page1.list.length != 0">
								<product-card v-for="item in page1.list" :item="item"></product-card>
							</div>
							<div class="img-box" style="height: 450px;">
								<image src="@/static/img/noProduct.png" mode="aspectFill"
									style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
							<div
								style="display: flex;flex-direction: column;justify-content: center;margin-top: 3.2vw;">
								<span class="jiu-font24-555" style="text-align: center;">粤ICP备2022094854号-3</span>
								<span class="jiu-font24-555" style="text-align: center;">联系方式：13168957016</span>
								<span class="jiu-font24-555" style="text-align: center;">九歌(广州)文化科技有限公司</span>
							</div>
						</div>
						
						
					</swiper-item> -->
				<!-- <swiper-item>
						<div id="egg">
							<div style="padding: 0 4.27vw;position: relative;" v-if="page2.list.length != 0">
								<egg-card v-for="item in page2.list" :item="item"></egg-card>
							</div>
							<div class="img-box" v-else>
								<image src="@/static/img/noProduct.png" mode="aspectFill"
									style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
							<div
								style="display: flex;flex-direction: column;justify-content: center;margin-top: 3.2vw;">
								<span class="jiu-font24-555" style="text-align: center;">粤ICP备2022094854号-3</span>
								<span class="jiu-font24-555" style="text-align: center;">联系方式：13168957016</span>
								<span class="jiu-font24-555" style="text-align: center;">九歌(广州)文化科技有限公司</span>
							</div>
						</div>
					</swiper-item> -->
			</swiper>
		</div>
	</ma-body>
</template>
<!-- <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<script>
	import Refresh from '@/$ma/common/js/refresh.js';
	export default {
		data() {
			return {
				swiperList: [],
				titleList: [{
						select: '/static/img/cangpinSelect.png',
						no: '/static/img/cangpinNo.png',
						name: '数字藏品'
					},
					{
						select: '/static/img/mangheTag.png',
						no: '/static/img/mangheTagNo.png',
						name: '合成'
					},
					{
						select: '/static/img/niudan.png',
						no: '/static/img/niudanNo.png',
						name: '扭蛋'
					}
				],
				selectIndex: 0,
				swiperHeight: 200,
				swiperName: ['num', 'synthetic', 'egg'],
				notHeight: '100%', //当没有内容的时候的高度
				page0: new Refresh(this, {
					apiName: "getProductSearch",
					apiData: {
						hasLimitTime: "1",
						type: "collection"
					},
					// objectName: ''
				}),
				page1: new Refresh(this, {
					apiName: 'getProductSearch',
					apiData: {
						hasLimitTime: "1"
					}
				}),
				page1: new Refresh(this, {
					apiName: 'getProductSearch',
					apiData: {
						hasLimitTime: "1",
						type: "synthetic"
					}
				}),
				page2: new Refresh(this, {
					apiName: 'getProductSearch',
					apiData: {
						hasLimitTime: "1",
						type: "twisted_egg"
					}
				}),
				stickyHeight: 0
			}
		},
		methods: {
			onSwiper(e) {
				if (this.swiperList[e].urlType == 'h5') {
					window.location.href = this.swiperList[e].url;
				} else if (this.swiperList[e].urlType == 'app') {
					let url = '/' + this.swiperList[e].url;
					uni.navigateTo({
						url: url
					})
				}
			},
			async onSelect(index) {
				if(index > 0){
					uni.showToast({
						icon: 'none',
						title: '敬请期待'
					})
					return;
				}
				this.selectIndex = index;
				this.page[`${index}`].onRefresh()
				this.onGetSwiperHeight();
				uni.pageScrollTo({
					scrollTop: 10,
					duration: 10,
					success: () => {
						console.log(123)
					}
				})
			},
			async getRect(id) {
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(id).boundingClientRect(data => {
						resolve(data);
					}).exec();
				});
			},
			async onGetSwiperHeight() {
				setTimeout(async () => {
					let type = this.swiperName[this.selectIndex];
					let res = await this.getRect(`#${type}`);
					if (!res) return;
					this.swiperHeight = res.height + 138;
				})
			},
			onChange(e) {
				this.selectIndex = e.detail.current;
				this.onGetSwiperHeight();
				uni.pageScrollTo({
					scrollTop: 10,
					duration: 10,
					success: () => {
						console.log(123)
					}
				})
			},
			async getBannerList() {
				let res = await this.$u.api.getBannerList({
					bannerType: 'index_1'
				});
				this.swiperList = res;
			},
			async onLoadmore() {
				await this[`page${this.selectIndex}`].onLoadmore();
			},
			toBei(){
				window.location.href = "http://www.beian.miit.gov.cn/"
			}
		},
		async onLoad() {
			await this.getBannerList();
			await this.page0.onRefresh();
			// await this.onGetSwiperHeight();
			// await this.page1.onRefresh();
			// await this.page2.onRefresh();
			// this.page2.onRefresh();
			this.$nextTick(() => {
				this.onGetSwiperHeight();
				Promise.all([
					this.getRect('#swiper'),
				]).then(res => {
					this.stickyHeight = res[0].top;
				});
			})
			// this.page1.onRefresh();
			// this.page2.onRefresh();
		},
		onShow() {
			this.onGetSwiperHeight();
		},
		// 下拉刷新[]
		async onPullDownRefresh() {
			this[`page${this.selectIndex}`].list = []
			await this[`page${this.selectIndex}`].onRefresh().then(() => {
				this.onGetSwiperHeight();
			});

			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 800); 
		},
		// 上拉加载
		async onReachBottom() {
			await this.onLoadmore();
			setTimeout(() => {
				this.onGetSwiperHeight();
			}, 0);
		},
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
	}

	swiper {
		height: 100%;
	}

	.img-box {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pet-body {
		// overflow: hidden;
	}

	swiper-item {
		height: 100%;
	}

	/deep/.u-swiper-indicator {
		padding: 0 !important;
		left: 6.4vw;
		bottom: 4.27vw !important;
		justify-content: flex-start !important;

	}

	/deep/.u-indicator-item-round {
		width: 1.07vw;
		height: 1.07vw;
		background-color: #555555;
		border-radius: 50%;
		opacity: 0.6;
	}

	/deep/.u-indicator-item-round-active {
		width: 1.07vw;
		height: 1.07vw;
		border-radius: 1.07vw;
		background-color: #FFCE80;
	}

	.big-box {
		padding-top: 4.27vw;
		background-color: #000;
		height: 100%;
	}

	.swiper-box {
		margin: 0 4.27vw;
	}

	.title-box {
		margin-top: 4.27vw;
		padding: 2.13vw 4.27vw;
		display: flex;

		// justify-content: space-between;
		.title {
			padding: 0vw 5.33vw 0vw 4.27vw;
			line-height: 12.27vw;
			border-radius: 6.13vw;
			// background-color: #1b1b1b;
			color: #555555;
			font-size: 3.73vw;
			font-weight: 300;
			margin-right: 2.13vw;
			display: flex;
			align-items: center;
			border: 1px solid #1B1B1B;
		}

		.active {
			color: #FFFFFF;
			background-color: #1b1b1b;
		}
	}
</style>
